<template>
  <div>
    <!-- v-show 或者 v-if
       v-show="vue变量"
       v-if="vue变量"
     -->
    <h1 v-show="isShow">我是h1</h1>
    <h2 v-if="isOk">我是h2</h2>
    <!-- 
      v-show隐藏: 采用display:none   // 频繁切换
      v-if隐藏:   采用从DOM树直接移除 // 移除
     -->

    <!-- v-if和v-else使用 -->
    <input type="text" v-model.number="age" />
    <p v-if="age < 18">成年了</p>
    <p v-else-if="(age < 30) & (age >= 18)">年轻人</p>
    <P v-else-if="age >= 30">三十而立</P>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      isOk: true,
      age: "",
    };
  },
};
</script>

<style>
</style>